<template>
  <div class="app-header-sticky" v-show="y>=100">22</div>
</template>

<script lang="ts" setup>
import { useWindowScroll } from "@vueuse/core";
import { watch } from "vue";
// 页面滚动利用第三方包
const { y } = useWindowScroll();
watch(
  y,
  (newVal) => {
    console.log(y.value);
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.app-header-sticky {
  width: 100%;
  height: 100px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: pink;
  transform: translateY(-100%);
  opacity: 0;
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 20px;
  }
}
</style>
